<template>
  <div v-show="showDialog">
    <div class="add-address-show">
      <div class="title">
        <div>{{addressType}}收货地址</div>
        <img :src="$global.Image.icon_close" @click="_cancelDialog" />
      </div>
      <div class="add-input">
        <el-form
          :model="addressForm"
          :rules="rules"
          ref="addressForm"
          label-width="100px"
          class="rule-form"
        >
          <el-form-item label="姓名" prop="real_name">
            <el-input v-model="addressForm.real_name" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="addressForm.phone" placeholder="请输入收货人手机号"></el-input>
          </el-form-item>
          <el-form-item label="地区" prop="area">
            <el-input v-model="addressForm.area" placeholder="请选择省市区" readonly></el-input>
            <el-cascader
              ref="cascaderAddr"
              v-model="addressVal"
              :options="district"
              :props="propsCascader"
              @change="_addressHandleChange"
              filterable
              :separator="separator"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="detail">
            <el-input v-model="addressForm.detail" placeholder="请输入详细地址"></el-input>
          </el-form-item>
          <el-form-item label="设为默认">
            <el-switch v-model="addressForm.isDefault" active-color="#DA213D"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button class="btn-r" type="primary" style="width:346px;color:#FFFFFF !important" @click="submitForm('addressForm')">保存收货信息</el-button>
            <!-- <el-button class="btn-b" @click="_cancelDialog">取消</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="dialog-shade"></div>
  </div>
</template>

<script>
import {
  getAddress,
  postAddress
} from "@api/user";
import { getCity } from "@api/public";

export default {
  name: 'AddressDialog',
  props:['addressType'],
  data() {
    return {
      showDialog: false,
      addressForm: {
        id: "",
        real_name: "",
        phone: "",
        area: "",
        detail: "",
        isDefault: false
      },
      
      rules: {
        real_name: [
          { required: true, message: "请输入收货人", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入收货人手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号格式不正确", trigger: "blur" }
        ],
        area: [
          { required: true, message: "请选择收货地区", trigger: "change" }
        ],
        detail: [{ required: true, message: "请输入详细地址", trigger: "blur" }]
      },
      // 地址-省市区
      propsCascader: {
        expandTrigger: "hover",
        label: "n",
        value: "v",
        children: "c"
      },
      separator: "",
      district: [],
      addressVal: [],
      address: {
        province: "",
        city: "",
        city_id: "",
        district: ""
      },
      callback: null
    };
  },
  mounted() {
    this.getCityList();
  },
  methods: {
    // 获取省市区
    getCityList() {
      let that = this;
      getCity()
        .then(res => {
          that.district = res.data;
        })
        .catch(err => {
          that.$dialog.error(err.msg);
        });
    },
    /**
     * 新增地址
     */
    showAddDialog(callback) {
      this.callback = callback;
      this.init();
      this.showDialog = true;
    },
    /**
     * 编辑地址
     */
    showEditDialog(id, callback) {
      this.callback = callback;
      this.init();
      let that = this;
      getAddress(id)
        .then(res => {
          let {
            id,
            real_name,
            phone,
            province,
            city,
            city_id,
            district,
            detail,
            is_default
          } = res.data;
          that.addressForm.id = id;
          that.addressForm.real_name = real_name;
          that.addressForm.phone = phone;
          that.addressForm.area = province + "" + city + "" + district;
          that.addressForm.detail = detail;
          that.addressForm.isDefault = is_default==1?true:false;
          that.address.province = province;
          that.address.city = city;
          that.address.city_id = city_id;
          that.address.district = district;
          that.showDialog = true;
        })
        .catch(err => {
          that.$dialog.error(err.msg);
        });
    },
    // 初始化
    init() {
      this.resetForm("addressForm");
      this.addressForm.id = "";
      this.address = {};
      this.addressVal = [];
    },
    _cancelDialog() {
      this.resetForm("addressForm");
      this.showDialog = false;
    },
    // 省市区格式化
    _addressHandleChange() {
      let val = this.$refs["cascaderAddr"].getCheckedNodes()[0].pathNodes;
      this.address.city = val[1].label;
      this.address.city_id = val[1].value;
      this.address.district = val[2].label;
      this.address.province = val[0].label;
      this.addressForm.area =
        val[0].label + "" + val[1].label + "" + val[2].label;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async submit() {
      let { id, real_name, phone, area, detail, isDefault } = this.addressForm;
      try {
        let that = this,
          params = {
            real_name: real_name,
            phone: phone,
            address: this.address,
            detail: detail,
            is_default: isDefault? 1 : 0,
            post_code: ""
          };
        if (id) params.id = id;
        postAddress(params)
          .then(function(res) {
            if (res.status != 200) {
              that.$dialog.toast({ mes: res.msg })
              return
            }
            if (id) that.$dialog.toast({ mes: "修改成功" });
            else that.$dialog.toast({ mes: "添加成功" });
            that.showDialog = false;
            that.callback()
          })
          .catch(err => {
            that.$dialog.error(err.msg);
          });
      } catch (e) {
        this.$dialog.error(e.msg);
      }
    }
  }
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss">
$color: #DA213D;
.add-address-show {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 200px;
  width: 700px;
  height: 500px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.2);
  margin: auto;
  z-index: 20;
  .title {
    display: flex;
    width: 100%;
    height: 67px;
    align-items: center;
    background: #fbf0f0;
    justify-content: center;
    > div:nth-of-type(1) {
      font-size: 21px;
      color: #DA213D;
    }
    img {
      display: block;
      width: 20px;
      height: 20px;
      font-size: 30px;
      color: #999999;
      position: absolute;
      right: 32px;
      cursor: pointer;
    }
  }
  .add-input {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
  }
  .rule-form {
    width: 460px;
    button {
      width: 140px;
    }
  }
}

.dialog-shade {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 18;
  background-color: rgba($color: #000000, $alpha: 0.4);
}

.el-cascader {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
}
</style>